<template>
  <view class="components-form">
    <!-- 顶部自定义导航 -->
   <tn-nav-bar fixed  backgroundColor="#4169E1" class="tatils">创建店铺</tn-nav-bar>
    <!-- 页面内容 -->
    <view :style="{paddingTop: vuex_custom_bar_height + 'px'}">
      <dynamic-demo-template ref="demoTemplate" :tips="tips" :sectionList="sectionList" :full="true" :fullWindowsScroll="true" @click="click">
        <tn-form :model="model" ref="form" :errorType="errorType" :labelPosition="labelPosition" :labelWidth="labelWidth" :labelAlign="labelAlign">
		  <tn-form-item label="店铺名称" prop="name" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.name" type="text" placeholder="请输入店铺名称" :border="border"></tn-input>
          </tn-form-item>
		  <tn-form-item label="店铺头像" prop="photo" :labelPosition="labelPosition" :labelAlign="labelAlign">
		    <tn-image-upload :action="action" :maxCount="1" name="image" :fileList="dimageall" @on-remove="delmig1" @on-success="imageUploadChange1"></tn-image-upload>
		  </tn-form-item>
		  <tn-form-item label="开店时间" prop="kdtimes" :labelPosition="labelPosition" :labelAlign="labelAlign">
		    <tn-input v-model="model.kdtimes" type="select" placeholder="请选择开店时间" :border="border" :selectOpen="kdshow" @click="kdshow = true"></tn-input>
		  </tn-form-item>
		  <tn-form-item label="上传图片" prop="photo" :labelPosition="labelPosition" :labelAlign="labelAlign">
		    <tn-image-upload :action="action" :maxCount="6" name="image" :fileList="model.imagelistall" @on-remove="delmig2" @on-success="imageUploadChange2"></tn-image-upload>
		  </tn-form-item>
          <tn-form-item label="主营品类" prop="cname" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.cname" type="select" placeholder="请选择主营品类" :border="border" :selectOpen="pickerShow" @click="pickerShow = true"></tn-input>
          </tn-form-item>
		  <tn-form-item label="联系人" prop="username"  :labelPosition="labelPosition" :labelAlign="labelAlign">
		    <tn-input v-model="model.username" type="text" placeholder="请输入手机号码" :border="border"></tn-input>
		  </tn-form-item>
          <tn-form-item label="手机号码" prop="phone"  :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.phone" type="number" placeholder="请输入手机号码" :border="border"></tn-input>
          </tn-form-item>
          <tn-form-item label="店铺简介" prop="desc" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.desc" type="textarea" placeholder="请输入店铺/公司简介" :border="border" inputAlign="center"></tn-input>
          </tn-form-item>
          <tn-form-item label="联系地址" prop="address" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.address" type="select" placeholder="请选择联系地址" :border="border" :selectOpen="dzshow" @click="dzshow = true"></tn-input>
			<!-- <tn-input v-model="model.address" type="textarea" placeholder="请输入联系地址" :border="border" ></tn-input> -->
          </tn-form-item>
          <tn-form-item label="最新报价" prop="money" :labelPosition="labelPosition" :labelAlign="labelAlign">
            <tn-input v-model="model.money"  placeholder="请再次最新报价" :border="border"></tn-input>
          </tn-form-item>
        </tn-form>
        <view style="width: 90%;margin: 0 auto;margin-top: 10px;">
			<view style="font-size: 12px;color: #dada6c;text-align: center;">入驻一年附近商家店铺</view>
			<view  style="font-size: 9px;color: #dadada;margin-top: 5px;text-align: center;">入驻店铺将展现在黄金推广位置，彰显品牌实力</view>
		</view>
        <!-- <tn-button backgroundColor="#01BEFF" fontColor="#FFFFFF" width="100%" @click="submit">提交</tn-button> -->
		<view @click="submit" style="overflow: hidden;width: 90%;margin: 0 auto;height: 35px;border-radius: 20px;background-color: #3B87FF;margin-top: 10px;">
			<view style="float: left;width: 50%;color: #ffffff;font-weight: 600;text-align: center;line-height: 35px;">100</view>
			<view  style="float: left;width: 50%;color: #ffffff;font-weight: 600;text-align: center;line-height: 35px;">立即支付</view>
		</view>
			
		
	  </dynamic-demo-template>
      
    
      <!-- 地区picker -->
      <tn-picker
        v-model="pickerShow"
        mode="region"
        @confirm="regionPickerConfirm"
      ></tn-picker>
	  <tn-popup v-model="dzshow" mode="right" width="600rpx">
	  	<nyn :hot="true" @bindCity="bindCity"></nyn>
	  </tn-popup>
	  <tn-calendar v-model="kdshow" maxDate="2099-12-12" mode="date" @change="qdtimes"></tn-calendar>
 
      <tn-select v-model="pickerShow" mode="single" valueName="id" labelName="name" :list="hylist" @confirm="confirm"></tn-select>
    </view>
    
  </view>
</template>

<script>
	import nyn from '@/components/nyn-city-list/nyn-city-list.vue'
	import {gethylist,addgetadd,getcList} from '@/apis/hy.js'
  import dynamicDemoTemplate from '@/libs/components/dynamic-demo-template.vue'
  export default {
    name: 'componentsForm',
    components: {dynamicDemoTemplate,nyn},
    data() {
      return {
		action: 'https://cs4.hephp.cn/index/index/uploads',
        errorType: ['message','border-bottom','toast'],
        labelPosition: 'left',
        labelAlign: 'right',
        border: false,
        labelWidth: 150,
		dzshow:false,
        checkboxWidth: 'auto',
        checkboxWrap: false,
        radioWidth: 'auto',
        radioWrap: false,
        pickerShow: false,
		kdshow:false,
        selectShow: false,
		hylist: [],
		dimageall:[],
        model: {
          dimage: [],
          name: '',
          cname:'',
		  desc:'',
		  kdtimes:'',
          cid: '',
          imagelist: [],
		  imagelistall: [],
          phone: '',
          username: '',
          address: '',
          money: '',
          uid: uni.getStorageSync('uid'),
          status: '',
        },
        rules: {
			name: [{required: true, message: '请输入店铺名称', trigger: 'blur'}],
			dimage: [{required: true, message: '请上传图片', trigger: 'blur'}],
			imagelist: [{required: true, message: '请上传图片', trigger: 'blur'}],
			name: [{required: true, message: '请输入店铺名称', trigger: 'blur'}],
			cid: [{required: true, message: '请选择类目', trigger: 'blur'}],
			desc: [{required: true, message: '请输入简介', trigger: 'blur'}],
			phone: [{required: true, message: '请输入手机号', trigger: 'blur'}],
			username: [{required: true, message: '请输入联系人', trigger: 'blur'}],
			address: [{required: true, message: '请输入地址', trigger: 'blur'}],
			money: [{required: true, message: '请输入最新报价', trigger: 'blur'}],
			kdtimes: [{required: true, message: '请选择开店时间', trigger: 'blur'}],
		},
        tips: ['请完整填写表单数据!'],
        sectionList: [
          {
            name: '参数切换',
            section: [
              {
                title: 'label显示位置',
                optional: ['左边','上边'],
                methods: 'labelPositionChange'
              },
              {
                title: 'label对齐方式',
                optional: ['左对齐','右对齐','居中'],
                methods: 'labelAlignChange',
                current: 1
              },
              {
                title: '边框显示',
                optional: ['显示','隐藏'],
                methods: 'borderChange',
                current: 1
              },
              {
                title: '可选项排列方式',
                optional: ['默认','宽度的50%','换行'],
                methods: 'checkRadioStyleChange'
              },
              {
                title: '错误提示方式',
                optional: ['message','toast','下划线','输入框'],
                methods: 'errorTypeChange'
              }
            ]
          }
        ]
      }
    },
    onReady() {
      this.$refs.form.setRules(this.rules)
    },
	onLoad() {
		this.getcLists()
	},
    methods: {
		bindCity(event){
			// let currents = this.currents
			this.model.address = event.name
			this.dzshow = false
			// this.jname.address = event.city
		},
		qdtimes(e){
			console.log(e)
			this.model.kdtimes = e.date
		},
		getcLists(){
			getcList().then(res => {
				console.log(res)
				if(res.code==200){
					this.hylist = res.data
				}
			}).catch(error => {
				that.tool.toastTip('登录出错,请稍后重试!', 'none', 1000)
			})
		},
		confirm(e) {
				console.log(e);
				this.model.cid = e[0].value
				this.model.cname = e[0].label
		},
		
      click(event) {
        this[event.methods] && this[event.methods](event)
      },
      // 切换label显示位置
      labelPositionChange(event) {
        switch (event.index) {
          case 0:
            this.labelPosition = 'left'
            break
          case 1:
            this.labelPosition = 'top'
            break
        }
      },
      // 切换label对其方式
      labelAlignChange(event) {
        switch (event.index) {
          case 0:
            this.labelAlign = 'left'
            break
          case 1:
            this.labelAlign = 'right'
            break
          case 2:
            this.labelAlign = 'center'
            break
        }
      },
      // 切换边框显示
      borderChange(event) {
        this.border = event.index === 0 ? true : false
      },
      // 切换可选项样式
      checkRadioStyleChange(event) {
        switch (event.index) {
          case 0:
            this.checkboxWidth = 'auto'
            this.checkboxWrap = false
            this.radioWidth = 'auto'
            this.radioWrap = false
            break
          case 1:
            this.checkboxWidth = '50%'
            this.checkboxWrap = false
            this.radioWidth = '50%'
            this.radioWrap = false
            break
          case 2:
            this.checkboxWidth = 'auto'
            this.checkboxWrap = true
            this.radioWidth = 'auto'
            this.radioWrap = true
            break
        }
      },
      // 切换错误提示方式
      errorTypeChange(event) {
        switch (event.index) {
          case 0:
            this.errorType = ['message']
            break
          case 1:
            this.errorType = ['toast']
            break
          case 2:
            this.errorType = ['border-bottom']
            break
          case 3:
            this.errorType = ['border']
            break
        }
      },
      
      
      // 表单提交
      submit() {
           this.$refs.form.validate(valid => {
            // 验证通过
            // if (!this.model.agreement) {
            //   this.$tn.message.toast('请勾选协议')
            //   return
            // }
			if (valid) {
			addgetadd(this.model).then(res => {
				console.log(res)
				if(res.code==200){
					this.$tn.message.toast('保存完成!')
					setTimeout(() => {
					      uni.navigateTo({
					      	url: '/pages/tuniao/tuniao'
					      })
					}, 2000); // 2000毫秒后执行更新
				}else{
					this.$tn.message.toast(res.message)
				}
			}).catch(error => {
				 this.$tn.message.toast('请完整填写数据!')
			})
			}else{
				this.$tn.message.toast('请完整填写数据!')
			}
		})
      },
      // 点击actionSheet选择性别
      actionSheetClick(index) {
        uni.hideKeyboard()
        this.model.sex = this.actionSheetList[index].text
      },
      // 点击地区选择器
      regionPickerConfirm(event) {
        this.model.region = event.province.label + '-' + event.city.label + '-' + event.area.label
      },
      // 点击商品类型列选择器
      goodsTypeSelectConfirm(event) {
        this.model.goodsType = `${event[0]['label']}`
      },
      // 多选项值改变事件
      checkboxGroupChange(event) {
        this.model.fruit = event
      },
      // 单选项值改变事件
      radioGroupChange(event) {
        this.model.payType = event
      },
 
      // 图片有修改
      imageUploadChange(lists) {
        this.model.photo = lists
      },
      // 同意协议状态修改
      agreementCheckChange(event) {
        this.model.agreement = event.value
      },
	  
	     
	  delmig1(index, lists, name){
		  this.model.dimage = ''
	  },
	  // 图片有修改
	  imageUploadChange1(data, index, lists, name) {
	  		 
	  		  let arr = []
	  		  let that = this
			  arr.push(data)
	  		// console.log(data)
				this.model.dimage = arr
	  		// console.log(this.model)
	  },
	  delmig2(index, lists, name){
	  		    console.log(index)
	  			let arr = this.model.imagelist
	  			arr.splice(index, 1);
	  		this.model.imagelist = arr
	  },
	  imageUploadChange2(data, index, lists, name) {
	  		  console.log(data)
	  		  console.log(lists)
	  		  let arr = this.model.imagelist
	  		  arr.push(data)
	      this.model.imagelist = arr
	  		  console.log(this.model)
	  },
    }
  }
</script>

<style lang="scss" scoped>
  .tatils{
  	color: #fff;
  }
  .agreement {
    display: flex;
    align-items: center;
    margin: 40rpx 0;
    
    &-text {
      padding-left: 8rpx;
      color: $tn-font-sub-color;
    }
  }
  
</style>
